<template>
	<view class="content">
		<view class="gallery-container">
			<view class="photo-sphere" id="sphere">
				<!-- 图片通过v-for动态渲染 -->
				<image v-for="(photo, i) in photos" :key="i" :src="photo.imgs" :data-desc="photo.description"
					:style="getImageStyle(i)" @click="showModal(photo)" class="photo" />
				</image>
			</view>
		</view>

		<!-- 图片详情模态框 -->
		<view class="modal" v-show="showModalFlag" @click="closeModal">
			<view class="modal-content">
				<view class="close" @click.stop="closeModal">&times;</view>
				<video :src="currentVideo" class="modal-video"></video>
				<view class="image-info">{{ currentDesc }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				photos: [],
				SPACING: 250,
				showModalFlag: false,
				currentVideo: "",
				currentDesc: "",
			};
		},
		onLoad() {
			this.show_loading();
			this.get_list();
		},
		methods: {
			get_list() {
				var self = this
				self.$boya.Request({
					url: "/activity/article",
					data: {
						type: 27
					},
				}, res => {
					console.log('res: ', res);
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].imgs) {
							let img = data[i].imgs.substring(2, data[i].imgs.length - 2);
							data[i].imgs = img
						}
						if (data[i].id == 246) {
							// console.log('data: ', data[i]);
							let init_index = data[i].init_index
							if (init_index.length > 0) {
								for (var j = 0; j < init_index.length; j++) {
									// console.log('init_index: ', init_index[j]);
									if (init_index[j].imgs) {
										let img = init_index[j].imgs.substring(2, init_index[j].imgs.length - 2);
										init_index[j].imgs = img
									}
								}
								self.photos = init_index
							}
						}
					}
					console.log('photos: ', self.photos);
					self.hide_loading();
				}, false);
			},
			getImageStyle(i) {
				const angle = 360 / this.photos.length;
				const radius = (this.photos.length * this.SPACING) / (2 * Math.PI);
				return `transform: rotateY(${angle * i}deg) translateZ(${radius}px)`;
			},
			showModal(photo) {
				this.currentVideo = photo.video_url;
				this.currentDesc = photo.description;
				this.showModalFlag = true;
			},
			closeModal() {
				this.showModalFlag = false;
			},
			show_loading() {
				uni.showLoading({
					title: '加载中...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
		},
	};
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: url("https://lg-boya-lg.obs.myhuaweicloud.com/new_app/activities/centuryLaborUnion/laborUnion/bj.jpg") 100% 100% / 100% 100%;
	}

	.gallery-container {
		perspective: 2000px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 520rpx;
	}

	.photo-sphere {
		width: 160px;
		height: 250px;
		position: relative;
		transform-style: preserve-3d;
		animation: rotate 30s infinite linear;
	}

	@keyframes rotate {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}

	.photo {
		position: absolute;
		width: 220px;
		height: 160px;
		object-fit: cover;
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
		cursor: pointer;
		transition: transform 0.3s;
	}

	.photo:hover {
		transform: scale(1.1);
	}

	.modal {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		position: relative;
		width: 85%;
		max-width: 800px;
		background: #fff;
		padding: 22px;
		border-radius: 15px;
		box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
	}

	.modal-video {
		width: 100%;
		height: 400rpx;
		max-height: 400rpx;
		border-radius: 10px;
		object-fit: contain;
	}

	.close {
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 38px;
		position: absolute;
		right: 5px;
		top: -55px;
		font-size: 30px;
		font-weight: bold;
		background-color: white;
		border-radius: 50%;
		cursor: pointer;
	}

	.image-info {
		margin-top: 20px;
		font-size: 28rpx;
		color: #333;
		text-align: center;
		padding: 15px;
		background: #f8f8f8;
		border-radius: 8px;
	}
</style>